<template>
    <div class="my background">
        <div class="myInfo">
            <div style="height: 80px"></div>
                <div class="collect">
                    <div @click="gotoCollect" class="num">{{collect}}</div>
                    <div><img src="../../assets/img/my/my_collect.png" /><span>收藏的活动</span></div>
                </div>
            <div class="line"></div>
                <div class="participation">
                    <div @click="gotoParticipation" class="num">{{participation}}</div>
                    <div><img src="../../assets/img/my/my_participation.png" /><span>参与的活动</span></div>
                </div>
        </div>
        <div style="position: absolute;top: 80px;left: 40%">
        <img :src="user.headimgurl" height="80" width="80" style="border-radius: 50px;"/>
            <p>{{user.nickname}}</p> 
        </div>
        <div class="myMenu">
            <div @click="gotoOderPay" class="menuItem" style="border-bottom: 1px solid #cccccc"><div class="menuTitle">支付订单</div><div class="icon"><img src="../../assets/img/my/my_go.png" alt="go" width="10" height="10"></div></div>
            <div @click="gotoVoucher " class="menuItem"><div class="menuTitle">报名凭证</div><div class="icon"> <img src="../../assets/img/my/my_go.png" alt="go" width="10" height="10"></div></div>
        </div>
    </div>
</template>

<script>
import { setStore,getStore } from '@/assets/js/utils.js';
import { getselectNum, getCollectNum } from '@/api/request.js';
    export default {
        name: "my",
        data() {
            return {
                collect: 0,
                participation: 0,
                user:{}
            }
        },
        created(){
            let userId = getStore('userId');
            let user = getStore('user');
            if(userId && user){
                this.user = user;
                this._getselectNum(userId)
                this._getCollectNum(userId)
            }else{
                //跳转登录
                var fhUrl = window.location.href;
                setStore('fhUrl', fhUrl);
                this.$router.push('/wxLogin')
            }
        },
        methods: {
            //参与数量
            _getselectNum(userId){
                let that = this;
                getselectNum(userId).then(res => {
                    if (res.code == 1) {
                        that.participation = res.data;
                    }
                }).catch(err => console.log(err)) 
            },
            //收藏数量
            _getCollectNum(userId){
                let that = this;
                getCollectNum(userId).then(res => {
                    if (res.code == 1) {
                        that.collect = res.data;
                    }
                }).catch(err => console.log(err)) 
            },
            gotoOderPay() {
                this.$router.push('/oderPay')
            },
            gotoVoucher() {
                this.$router.push('/voucher')
            },
            gotoCollect() {
                this.$router.push('/collect')
            },
            gotoParticipation() {
                this.$router.push('/participation')
            }
        },
        mounted() {
            this.$store.commit('UPDATE_PAGE_TITLE', '我的')
            this.$store.commit('UPDATE_BACKSHOW', false)
            this.$store.commit('UPDATE_FOOTER', true)
            let oMy = document.querySelector('.my');
            oMy.style.height = window.innerHeight-40-55 + 'px'
        }
    }
</script>

<style lang="scss" scoped>
    .my {
        background-image: url(../../assets/img/my/my_bg.png);
        background-repeat: no-repeat;
        -webkit-background-size: 100% 100%;
        background-size: 100% 25%;
        background-position: left top;
        margin-top: 40px;
        padding-top: 40px;
    }
    .myInfo{
        width: 90%;
        background-color: #ffffff;
        border-radius: 10px;
        overflow: hidden;
        margin: 40px auto 0;
    }
    .collect{
        float: left;
        width: 49.5%;
        padding-bottom: 10px;
        img{
            width: 20px;
            height: 20px;
        }
    }
    .line{
        float: left;
        width: 1%;
        background-color: #efefef;
        height: 50px;
    }
    .participation{
        float: right;
        width: 49.5%;
        padding-bottom: 10px;
        img{
            width: 20px;
            height: 20px;
        }
    }
    .num{
        color: #9d9d9d;
        font-size: 30px;
    }
    .myMenu{
        width: 90%;
        margin: 30px auto 0;
        border-radius: 10px;
        background-color: #ffffff;
    }
    .menuTitle{
        float: left;
        margin-left: 10px;
    }
    .icon{
        float: right;
        margin-right: 10px;
    }
    .menuItem{
        height: 50px;
        line-height: 50px;
    }
</style>